<template>
  <div class="lessorBox">
    <el-table :data="tableData" height="400" border style="width: 100%">
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="nickname" label="网名" width="180"></el-table-column>
      <el-table-column prop="name" label="真实姓名"></el-table-column>
      <el-table-column prop="phoneNumber" label="电话号码"></el-table-column>
      <el-table-column prop="identityCard" label="身份证号"></el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row.rentCars)"
          type="primary"
          size="small">
          名下车辆
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[5,8, 10, 12]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      ></el-pagination>
    </div>
    <el-dialog title="名下车辆" :visible.sync="dialogTableVisible">
    <el-table :data="rentCars">
      <el-table-column property="carBrand" label="车辆名" width="100"></el-table-column>
      <el-table-column property="carNumber" label="车牌号" width="100"></el-table-column>
      <el-table-column label="车辆图片">
        <template slot-scope="scope">
          <!-- <el-button @click.native.prevent="sss(scope)">xianshi</el-button> -->
          <el-image :src="scope.row.imgs[0].imagePath"></el-image>
          <img class="studentsImage"  :src="scope.row.imgs[0].imagePath"/>
        </template>
      </el-table-column> 

      <el-table-column property="rentTime" label="出租日期" width="150"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      pageData: {
        currentPage: 1,
        pageSize: 5,
        total: 5
      },
      tableData: [],
      dialogTableVisible:false,
      rentCars:[],
    };
  },
  created(){
    
    this.getLessor()
  },
  methods: {
    //点击显示弹出框
     deleteRow(rentCars) {
       this.dialogTableVisible = true;
       this.rentCars = rentCars
      },
    handleSizeChange(val) {
      this.pageData.pageSize = val;
       this.getLessor()
    },
    handleCurrentChange(val) {
      this.pageData.currentPage = val;
       this.getLessor()
    },
    async getLessor() {
      const { data } = await axios.get("/users/getUsers", {
        params: {
          status: "出租方",
          currentPage: this.pageData.currentPage,
          pageSize: this.pageData.pageSize,
          total: this.pageData.total
        }
      });
      console.log(data.total);
      this.pageData.total = data.total;
      this.tableData = data.rows
    }
  }
};
</script>

<style lang="less" scoped>

.el-table{
  line-height: 25px;
}
.el-pagination{
  height: 30px;
  margin-top: 10px;
}
</style>

